

<template>
    <div>
        <h2>Demo - Demo - Demo </h2>
        <h2> num == {{ num  }}</h2>
        <h2 @click="changeCount">count == {{ count }} </h2>
        <h2> total == {{ total  }} </h2>
        <h2>text == {{ text }} </h2>
        <p>
            <input type="text" v-model="text">
        </p>
    </div>
</template>

<script>
    import { ref , h, onMounted, watch , computed } from 'vue'
    export default {
        data(){
            return {
                num:2000 
            }
        },
        mounted(){
            console.log('Demo - Demo - Demo')
        },
        setup(props,context){
            const count = ref(1000)  
            const text = ref("Are you oK")
            const changeCount = ()=>{
                count.value++;
            }

            watch(count,(newCount,oldCount)=>{
                console.log('count 的新值是 === ' + newCount)
            })
            const total = computed(()=>{
                return count.value * 10 + 888;
            })
            onMounted(()=>{
                console.log('Vue3 so easy ')
            })

            // 暴露给 模板 
            return {
                count,   // this.count 
                changeCount,
                total, 
                text
            }

            // 返回一个渲染模板的函数 
            // return () => h('div', count.value)
        },
        methods:{

        },
       
    }
</script>